<template>
  <div class="app-container calendar-list-container">
  <el-table :data="listData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">   
      <el-table-column min-width="120px" label="音频名称">
        <template slot-scope="scope">
          <span>{{scope.row.keyword}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="90px" label="提示次数">
        <template slot-scope="scope">
          <span>{{scope.row.values | valuesName}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="190px" label="链接">
        <template slot-scope="scope">
          <span>{{scope.row.extra}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="190px" label="手动/自动">
        <template slot-scope="scope">
          <span>{{scope.row.types | typesName}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="100">
        <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status | statusName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="80" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div> -->
    <!-- 代理商添加弹框 start-->
    <el-dialog title="设置" :visible.sync="editVisible"  width="35%">
        <el-form  ref="vocieForm" :model="vocieInfo" label-position="left" label-width="80px" style='margin-left:40px;'  class="demo-ruleForm">
            <el-form-item label-width="100px" label="提示次数">
                <el-input-number style='max-width:140px;' v-model="vocieInfo.values" controls-position="right" :min="0" :max="10"></el-input-number>
                <span>0:代表不限次数</span>
            </el-form-item>
            <el-form-item label-width="100px" label="状态">
              <el-select v-model="vocieInfo.status"  placeholder="音频状态" style="width: 53%;">
                <el-option  label="停用"  value="0"></el-option>
                <el-option  label="使用"  value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="手动/自动">
            <el-select v-model="vocieInfo.types"  placeholder="手动/自动播放" style="width: 53%;">
              <el-option  label="手动播放"  value="0"></el-option>
              <el-option  label="自动播放"  value="1"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="addLoading" @click="handleUpdate('saveBtn')">确认添加</el-button>
      </span>
    </el-dialog>
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>
<script>

import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API

export default {
  name: 'setVoice',

  components: { BackToTop },

  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中
        background: '#e7eaf1'// 按钮的背景颜色
      },
      //   listQuery: {
      //     page: 1,
      //     pagesize: 10
      //   },
      listData: [],
      listLoading: false,
      addLoading: false,
      editVisible: false,
      vocieInfo: {
        values: 0,
        status: '0',
        types: '0'
      }
    }
  },

  // 装换属性
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    },
    statusName(status) { // 1-使用；0-无效/停用
      return (status === '1') ? '使用中' : '停用'
    },
    valuesName(status) {
      return (status === '0') ? '循环播放' : '循环( ' + status + ' )次'
    },
    typesName(status) {
      return (status === '1') ? '自动播放' : '手动播放'
    }
  },

  // 初始化数据
  created() {
    setTimeout(() => {
      this.fetchData()
    }, 20)
  },

  methods: {
    // 获取数据
    fetchData() {
      this.listLoading = true
      var data = { label: 'sound' } // 修改单个字段
      return new Promise((resolve, reject) => {
        api.systemConfigApi(data).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
          }
          this.listLoading = false
        })
      })
    },

    // 编辑按钮
    handleUpdate(row) {
      if (row === 'saveBtn') { // 提交按钮
        // 提交数据
        api.postSystemConfigApi(this.vocieInfo).then(response => {
          if (response.data.code === 0) {
            this.fetchData()
            this.$root.message('操作成功', 'success')
          }
        })
        this.editVisible = false
      } else {
        this.editVisible = true // 编辑弹框
        this.vocieInfo.values = row.values
        this.vocieInfo.status = row.status
        this.vocieInfo.id = row.id
      }
    }

    // // 改变页条数
    // handleSizeChange(val) {
    //   this.listQuery.pagesize = val
    // },
    // // 跳页
    // handleCurrentChange(val) {
    //   this.listQuery.page = val
    // }

  }

}
</script>
